<template>
	<view id="map" :baseMap="baseMap" :change:baseMap="MapRender.watchBaseMap">
		<text hidden :payload="payload" :change:payload="MapRender.watchTagChange"></text>
		<text hidden :currentRadio="currentRadio" :change:currentRadio="MapRender.watchSwitchStation"></text>
		<text hidden :center="center" :change:center="MapRender.watchCenterChange"></text>
	</view>

</template>

<script>
	import "maplibre-gl/dist/maplibre-gl.css";
	import { usePlayerStore } from "@/stores/usePlayerStore";
	// import type { Station } from '@/common/types/interface';
	export default {
		// 这里无需再引入 maplibre-gl
		props: {
			baseMap: { type: String, required: true },
			payload: { type: Object, required: true },
			currentRadio: { type: Object, required: true },
			center: { type: String, required: true }
		},
		methods: {
			playStation(props) {
				const playerStore = usePlayerStore();
				console.log("从地图切换电台", props);
				playerStore.switchStation(props);
			},
		},
	};
</script>

<script module="MapRender" lang="renderjs">
	import { MapManager } from '@/common/renderjs/MapManager.js';
	let mapManager;
	let map;
	let lat = 0,
		lng = 0;
	export default {
		async mounted() {
			//注入css样式定义
			this.createStyle();
			mapManager = new MapManager('map', this.handlePointClick);
			mapManager.init(); // 初始化地图并自动加载数据与绑定事件
			map = mapManager.map;
		},
		methods: {
			watchBaseMap(newVal, oldVal, ownerInstance) {
				console.log('监听到切换地图事件', newVal, oldVal);
				if (!mapManager) {
					console.log('此时mapManager还未初始化');
					return;
				}

				if (newVal) {
					localStorage.setItem('baseMap', newVal);
					mapManager.setBaseStyle(newVal);
				}
			},
			watchCenterChange(newVal, oldVal, ownerInstance) {
				console.log('监听到中心点改变事件', newVal, oldVal);
				if (newVal) {
					[lng, lat] = newVal.split(',').map(Number);
				}
			},

			watchTagChange(newVal, oldVal, ownerInstance) {
				console.log('监听到切换标签事件')
				if (!map) return;
				const { type, tags } = newVal;
				if (type === 'lang') {
					if (!tags) map.setFilter('radio-point-layer', ['!', ['has', 'point_count']]); //开启聚合的恢复方法
					else map.setFilter('radio-point-layer', ['in', ['get', 'langcode'],
						["literal", tags]
					]);
				} else {
					if (!tags) map.setFilter('radio-point-layer', ['!', ['has', 'point_count']]); //开启聚合的恢复方法
					else map.setFilter('radio-point-layer', ['in', ['get', 'category'],
						["literal", tags]
					]);
				}
			},
			watchSwitchStation(newVal, oldVal, ownerInstance) {
				console.log('监听到切换电台事件')
				if (!mapManager) { console.log('此时mapManager还未初始化'); return; }
				const curStation = newVal;
				mapManager.highLightStation(curStation.geo_long || lng, curStation.geo_lat || lat, curStation);
			},
			createStyle() {
				const style = document.createElement('style')
				style.innerHTML = `
							.maplibregl-popup-content{
								background:#282828!important;
							}

							.maplibregl-popup-close-button{
								color:#282828!important;
							}

							.maplibregl-popup-tip{
								border-top-color:#282828!important;
							}

							.bubble-content {
								display: flex;
								flex-direction: column;
							}
				
							.radio-name {
								font-size: 32rpx;
								color:#FFFFFF;
								font-weight: bold;
								margin-bottom: 10rpx;
							}
				
							.radio-style {
								font-size: 24rpx;
								color: #eee;
								margin-bottom: 10rpx;
							}
				
							.bubble-arrow {
								position: absolute;
								bottom: -20rpx;
								left: 50%;
								transform: translateX(-50%);
								width: 0;
								height: 0;
								border-left: 20rpx solid transparent;
								border-right: 20rpx solid transparent;
								border-top: 20rpx solid #fff;
							}
				
							#map-loading-spinner {
								position: absolute;
								top: 50%;
								left: 50%;
								width: 40px;
								height: 40px;
								margin: -20px 0 0 -20px;
								border: 4px solid rgba(0, 0, 0, 0.1);
								border-top-color: #ff00ff;
								border-radius: 50%;
								animation: spin 1s linear infinite;
								z-index: 999;
							}
				
							@keyframes spin {
								to { transform: rotate(360deg); }
							}
							`
				document.head.appendChild(style);
			},

			handlePointClick(props) {
				this.$ownerInstance.callMethod('playStation', props);
			}
		}
	}
</script>

<style scoped>
	#map {
		width: 100%;
		height: 100%;
		flex: 1 1 auto;
	}
</style>